import { Button, Card, Form, Input, message, Select, Table } from 'antd'
import React, { useEffect, useState } from 'react'
//导入icon图标
import { SearchOutlined } from '@ant-design/icons';
import { getAllHospitalType, getAllProvinceList, getHospitalListData, getProvinceCityData, ModifyHospitalStatus } from '@/api/hospital/hospitallist';
import type { GetAllProvinceLists, resHospitalListListsData, resHospitalListOneResultData } from '@/api/hospital/hospitallist/model/hospitalListType';
//导入表格列类型
import type { ColumnsType } from 'antd/es/table';
import { useNavigate } from 'react-router-dom';
//导入Option组件
const { Option } = Select
export default function HospitalList() {

    //定义一个存储医院列表数据的状态
    let [hospitallist, setHospitallist] = useState<resHospitalListListsData>([]);
    //定义一个当前是第几页状态数据
    let [current, setCurrent] = useState(1);
    //定义一个当前每页显示多少条数据
    let [pageSize, setPageSize] = useState(5);
    //定义一个总条数状态数据
    let [total, setTotal] = useState(0);
    //定义一个存储所有省份数据的状态变量
    let [provincelist, setProvincelist] = useState<GetAllProvinceLists>([]);
    //定义一个存储对应省份数据下城市的状态变量
    let [citys, setCitys] = useState<GetAllProvinceLists>([]);
    //定义一个存储对应城市下区的状态变量
    let [dictCode, setDictCode] = useState<GetAllProvinceLists>([]);
    //定义一个存储所有医院类型的状态变量
    let [hospitalType, setHospitalType] = useState<GetAllProvinceLists>([]);
    //定义数据是否是加载中的状态变量
    let [loading, setLoaing] = useState(false);
    //定义useNavigate钩子
    let navigate = useNavigate();
    //创建表单的实例对象
    let [form] = Form.useForm();

    //封装一个可以公用的方法
    //页面组件挂载完成之后，清空之后，查询之后，分页之后都可以重复调用的方法
    const getAllHospitalList = async () => {
        //form.getFieldsValue() 获取的是一个对象
        // console.log(form.getFieldsValue());
        //开始请求了
        setLoaing(true);
        let result = await getHospitalListData({ page: current, limit: pageSize, ...form.getFieldsValue() });
        //更新状态
        setHospitallist(result.content);
        setTotal(result.totalElements)
        setLoaing(false);
    }
    //组件挂载完成之后(componentDidMount)和状态数据发生了变化之后(componentDidUpdate)，都要重新请求所有的医院列表数据
    useEffect(() => {
        //调用函数
        getAllHospitalList();
    }, [current, pageSize])

    //请求所有的省份数据
    const reqAllProvince = async () => {
        //调用函数
        let result = await getAllProvinceList();
        //更新状态函数
        setProvincelist(result);
    }

    //请求所有的医院类型
    const reqAllHospitalType = async () => {
        let result = await getAllHospitalType();
        //更新状态函数
        setHospitalType(result);
    }

    useEffect(() => {
        //调用
        reqAllProvince();
    }, [])

    useEffect(() => {
        //调用
        reqAllHospitalType();
    }, [])

    //定义事件函数(选择省筛选对应的城市)
    let getCity = async (id: number) => {
        //设置对应省份下的城市和区数据的值为undefined
        //setFieldsValue:这个方法是表单设置值的方法，需要传入一个参数为对象结构
        form.setFieldsValue({ cityCode: undefined, districtCode: undefined });
        setCitys([]);
        setDictCode([])
        //调用请求对应省份下城市的数据
        let result = await getProvinceCityData(id);
        //更新状态
        setCitys(result);
    }
    //选择城市筛选对应的区
    let getdictCode = async (id: number) => {
        //设置对应城市下区的数据的值为undefined
        form.setFieldsValue({ districtCode: undefined });
        setDictCode([])
        //调用请求对应省份下城市的数据
        let result = await getProvinceCityData(id);
        //更新状态
        setDictCode(result);
    }

    //声明搜索的函数
    let finish = () => {
        if (current === 1) {
            getAllHospitalList();
        } else {
            setCurrent(1);
        }
    }

    //声明清空的函数
    let reset = () => {
        if (current === 1) {
            getAllHospitalList();
        } else {
            setCurrent(1);
        }
    }

    //声明修改医院状态的方法
    let updateStatus = async (id: string, status: number) => {
        // console.log('编号:', id);
        // console.log('状态:', status)

        try {
            //调用函数
            await ModifyHospitalStatus(id, status);
            message.success('更新状态成功');
            //重新调用方法
            getAllHospitalList();
        } catch (e) {
            message.success('更新状态失败');
        }

    }

    //声明查看医院详情函数
    let showDetail = (id: string) => {
        //路由跳转
        navigate(`show/${id}`);
    }

    //查看对应医院排班详情函数
    let showSchedule = (hoscode: string) => {
        //路由跳转
        navigate(`schedule/${hoscode}`);

    }

    //表格的列
    const columns: ColumnsType<any> = [
        {
            //列名
            title: '序号',
            //列宽度
            width: 70,
            //内容居中
            align: 'center',
            //绑定的数据字段(当如果这个字段的值需要显示的时候保留,而这个字段完全是重构的时候就可以不需要这个字段)
            //然而如果想要重构列内容的时候，需要调用render回调函数
            //参数1：当前行的值
            //参数2：当前行的数据
            //参数3：当前行下标
            render: (a: any, b: any, index: number) => {
                return index + 1;
            }
        },
        {
            title: '医院logo',
            dataIndex: 'logoData',
            width: 100,
            render: (a: any, b: any, index: number) => {
                //如果是base64位加密串，想要显示图片
                //语法：data:image/当前图片的类型;base64, 在逗号的后面是base64字符串
                return <img src={"data:image/png;base64," + a} alt="" width={100} />
            }
        },
        {
            title: '医院名称',
            dataIndex: 'hosname',
        },
        {
            title: '等级',
            render: (a: resHospitalListOneResultData) => {
                return a.param.hostypeString;
            }
        },
        {
            title: '详细地址',
            render: (a: resHospitalListOneResultData) => {
                return a.param.fullAddress;
            }
        },
        {
            title: '状态',
            dataIndex: 'status',
            render: (a: any) => {
                return a === 0 ? '未上线' : '已上线';
            }
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
        },
        {
            title: '操作',
            render: (text: resHospitalListOneResultData) => {
                return <>
                    <Button type='primary' onClick={() => showDetail(text.id)}>查看</Button>
                    <Button type='primary' className='ml1' onClick={() => showSchedule(text.hoscode)}>排班</Button>
                    {
                        text.status === 1 ?
                            <Button type='primary' className='ml1' onClick={() => updateStatus(text.id, 0)}>下线</Button> :
                            <Button type='primary' className='ml1' onClick={() => updateStatus(text.id, 1)}>上线</Button>
                    }

                </>
            }
        },
    ];
    return (
        <Card>
            <Form name="basic" autoComplete="off" layout='inline' onFinish={finish} form={form} onReset={reset}>
                <Form.Item name="provinceCode">
                    <Select style={{ width: 180, marginBottom: 20 }} placeholder='请选择省' onChange={getCity}>
                        {
                            provincelist.map(item => {
                                return <Option value={item.id} key={item.id}>{item.name}</Option>
                            })
                        }
                    </Select>
                </Form.Item>
                <Form.Item name="cityCode">
                    <Select style={{ width: 180 }} placeholder='请选择市' onChange={getdictCode}>
                        {
                            citys.map(item => {
                                return <Option value={item.id} key={item.id}>{item.name}</Option>
                            })
                        }
                    </Select>
                </Form.Item>
                <Form.Item name="districtCode">
                    <Select style={{ width: 180 }} placeholder='请选择区'>
                        {
                            dictCode.map(item => {
                                return <Option value={item.id} key={item.id}>{item.name}</Option>
                            })
                        }
                    </Select>
                </Form.Item>

                <Form.Item name="hosname">
                    <Input placeholder='医院名称' />
                </Form.Item>

                <Form.Item name="hoscode">
                    <Input placeholder='医院编号' />
                </Form.Item>

                <Form.Item name="hostype">
                    <Select style={{ width: 180 }} placeholder='医院类型'>
                        {
                            hospitalType.map(item => {
                                return <Option value={item.value} key={item.id}>{item.name}</Option>
                            })
                        }

                    </Select>
                </Form.Item>

                <Form.Item name="status">
                    <Select style={{ width: 180 }} placeholder='医院状态'>
                        <Option value={1}>已上线</Option>
                        <Option value={0}>未上线</Option>
                    </Select>
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
                        查询
                    </Button>
                </Form.Item>
                <Form.Item>
                    <Button htmlType="reset">
                        清空
                    </Button>
                </Form.Item>
            </Form>
            <div className='h-10'></div>
            {/* 表格组件 */}
            <Table
                dataSource={hospitallist}
                rowKey='id'
                columns={columns}
                loading={loading}
                bordered pagination={{
                    //当前是第几页
                    current,
                    //每页显示多少条数据
                    pageSize,
                    //总条数
                    total,
                    //配置分页下拉列表
                    pageSizeOptions: [5, 10, 15, 20],
                    //显示分页下拉列表
                    showSizeChanger: true,
                    //是否快速跳转页面
                    showQuickJumper: true,
                    //显示总数的回调
                    showTotal: (total: number) => {
                        return `总共${total}条`
                    },
                    //当数字分页和下拉列表值发生变化的时候调用的事件
                    onChange: (page: number, pageSize: number) => {
                        // console.log('点击的数字分页：', page);
                        // console.log('每一页显示多少条:', pageSize);

                        setCurrent(page);
                        setPageSize(pageSize);
                    }
                }} />
        </Card>
    )
}
